<!--
 * @Description: 密码强度提示框组件
 * @Author: zhaolei
 * @Date: 2023-07-10 14:38:15
-->


<template>
  <pwd-tip
    ref="pwdTip"
    v-model="pwdTipVisible"
    placement="right"
    :password="_value"
  >
    <el-input
      v-model.trim="_value"
      v-bind="$attrs"
      type="password"
      :clearable="true"
      autocomplete="off"
      @focus="pwdTipVisible = true"
      @blur="blurChange"
    ></el-input>
  </pwd-tip>
</template>

<script>
import PwdTip from './pwdTip.vue';

export default {
  name: 'PwdTipIndex',
  components: {
    PwdTip,
  },
  props: {
    // eslint-disable-next-line vue/require-prop-types
    value: {
      require: true,
    },
  },
  data() {
    return {
      pwdTipVisible: false,
    };
  },
  computed: {
    _value: {
      get() {
        return this.validatenull(this.value) ? '' : this.value.toString();
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {},
  mounted() {},
  methods: {
    blurChange() {
      this.pwdTipVisible = false;
      this.$emit('input', this._value);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
